<template>
  <f7-page class="step-body1">
    <div class="header-f7">
      <f7-link back icon-f7="chevron_left" color="white" size="34px"></f7-link>
    </div>
    <f7-block class="f7-block">
      <f7-block-title class="block-title">访客预约</f7-block-title>
      <f7-row class="f7-row">
        <ul>
          <li class="it-li">
            <div class="ul-li">1</div>
          </li>
          <li class="ellipsis">...................</li>
          <li class="it-li">
            <div class="ul-li">2</div>
          </li>
          <li class="ellipsis">...................</li>
          <li>
            <div class="ul-li2">3</div>
          </li>
        </ul>
      </f7-row>
      <f7-row class="f7-row2">
        <ul>
          <li class="ul-li">被访单位</li>
          <li class="ul-li">来访人信息</li>
          <li class="ul-li2">提交预约</li>
        </ul>
        <img src="static/img/step/index1/qiche.svg" alt="" class="img1" />
        <img src="static/img/step/index1/mubiao.svg" alt="" class="img2" />
      </f7-row>
      <f7-row class="f7-row3">
        <f7-card class="f7-card">
          <div class="noticebar">
            <qm-notice-bar
              :noticebar="noticebar"
              :left-icon="noticebar.icon"
              wrapable
              :scrollable="false"
              :text="noticebar.title"
            ></qm-notice-bar>
          </div>
          <div class="card-title">请填写信息</div>
          <qm-field label="姓名" required placeholder="请输入来访人姓名">
          </qm-field>
          <qm-field
            label="身份证号"
            required
            placeholder="请输入来访人身份证号"
          >
          </qm-field>
          <qm-field label="联系电话" required placeholder="请输入来访人手机号">
          </qm-field>
          <qm-field
            label="到访时间"
            required
            placeholder="请选择时间"
            arrow-direction="down"
            is-link
            readonly
          >
          </qm-field>
          <qm-field label="来访人数" required placeholder="请输入来访人数">
          </qm-field>
          <qm-field
            label="联系人信息"
            required
            placeholder="请输入联系人姓名"
            :border="false"
          >
          </qm-field>
        </f7-card>
      </f7-row>
      <f7-card class="f7-card2">
        <qm-field
          label="来访车辆车牌"
          placeholder="请输入来访人车辆车牌"
          :border="false"
        >
        </qm-field>
        <ul>
          <li>注：</li>
          <li>
            视具体情况合理安排车位，建议将车辆停到附近的停车场（如XXX广场），若产生停车费，请自理，感谢理解支持！
          </li>
        </ul>
      </f7-card>
      <f7-card class="f7-card3">
        <qm-field
          label="来访事由"
          required
          type="textarea"
          autosize
          placeholder="请简要说明来访的事由"
          :border="false"
        >
        </qm-field>
      </f7-card>
      <f7-card class="f7-card2">
        <qm-field
          label="上传证明"
          required
          autosize
          placeholder=""
          :border="false"
        >
        </qm-field>
        <ul>
          <li class="sfz">注：请上传身份证照片、工作证照片</li>
        </ul>
        <qm-upload-picture
          :params="{ dataKey: 'test', type: 'test' }"
          :showtitle="false"
        ></qm-upload-picture>
        <f7-button  fill round class="f7-button">下一步</f7-button>
      </f7-card>
    </f7-block>
  </f7-page>
</template>

<script>
export default {
  data() {
    return {
      show: "false",
      noticebar: {
        icon: "static/img/step/index1/icon_tongzhi.svg",
        title:
          "小时内提交预约申请单，工作日可预约时间段为小时内提交预约申请单，工作日可预  ",
      },
    };
  },
};
</script>

<style lang="less" scoped>
.step-body1 {
  position: relative;
  background-color: #f5f7fa;
  .header-f7 {
    position: absolute;
    top: 5px;
    left: 5%;
    z-index: 3;
  }
  .f7-block {
    margin: 0px;
    padding: 0px;
    background: url("../../../../static/img/step/index1/bg_liucheng.png") no-repeat;
    background-size: 100% calc(336px * var(--ratio));
    background-attachment: fixed;
    width: 100%;
    // height: calc(352px * var(--ratio));

    .block-title {
      text-align: center;
      color: var(--color-text-base);
      padding-top: calc(20px * var(--ratio));
      margin-bottom: calc(62px * var(--ratio));
      font-size: calc(37px * var(--ratio));
    }

    .f7-row {
      ul {
        margin: 0px calc(93px * var(--ratio));
        display: flex;
        justify-content: space-around;
        width: 100%;
        margin-bottom: calc(28px * var(--ratio));

        .ellipsis {
          color: #ffffffb3;
        }
        .it-li {
          border: 2px solid rgba(255, 255, 255, 0.21);
          border-radius: 50%;
        }
        li {
          text-align: center;
          .ul-li {
            width: calc(54px * var(--ratio));
            height: calc(54px * var(--ratio));
            border-radius: 50%;
            line-height: calc(54px * var(--ratio));
            text-align: center;
            background-color: var(--color-fill-grey-inverse);
            color: var(--color-brand);
          }

          .ul-li2 {
            width: calc(54px * var(--ratio));
            height: calc(54px * var(--ratio));
            border-radius: 50%;
            line-height: calc(54px * var(--ratio));
            text-align: center;
            background-color: #ffffffb3;
            color: var(--color-brand);
          }
        }
      }
    }

    .f7-row2 {
      padding-bottom: calc(80px * var(--ratio));
      position: relative;

      ul {
        width: 100%;
        display: flex;
        justify-content: space-around;
        margin: 0px 5px;

        .ul-li {
          color: var(--color-fill-grey-inverse);
          font-size: calc(30px * var(--ratio));
        }

        .ul-li2 {
          color: #ffffffb3;
          font-size: calc(30px * var(--ratio));
        }
      }

      .img1 {
        position: absolute;
        bottom: -14%;
        left: 4%;
        width: calc(134px * var(--ratio));
        height: calc(46px * var(--ratio));
        z-index: 1;
      }

      .img2 {
        position: absolute;
        bottom: -14%;
        right: 4%;
        width: calc(34px * var(--ratio));
        height: calc(45px * var(--ratio));
        z-index: 1;
      }
    }

    .f7-row3 {
      margin: -2px;
      padding: 0px;

      .f7-card {
        margin: 0px;
        padding: calc(50px * var(--ratio)) calc(34px * var(--ratio)) 0px;
        width: 100%;
        --f7-card-box-shadow: var(--color-fill-grey-inverse);
        --f7-card-border-radius: 11px;
        --f7-button-raised-box-shadow: #ffff;
        /deep/ .van-cell{
          padding: 15px 16px;
        }
        .card-title {
          margin-left: 7px;
          margin-top: calc(40px * var(--ratio));
          font-size: calc(36px * var(--ratio));
          font-weight: 500;
          color: var(--color-text-title);
        }

        .footnote {
          margin-top: calc(60px * var(--ratio));
          margin-bottom: calc(40px * var(--ratio));
          font-size: calc(24px * var(--ratio));
          color: var(--color-text-weak);
        }

        .f7-button {
          background-color: #3385ff67;
          color: var(--color-fill-grey-inverse);
          height: calc(96px * var(--ratio));
          line-height: calc(96px * var(--ratio));
          --f7-button-raised-box-shadow: #ffff;
        }
      }
    }
    .f7-card2 {
      padding: 0px;
      margin: 0px;
      padding: 0px calc(35px * var(--ratio)) calc(25px * var(--ratio));
      margin-top: calc(20px * var(--ratio));
      width: 100%;
      --f7-card-box-shadow: var(--color-fill-grey-inverse);

      ul {
        color: var(--color-text-weak);
        font-size: calc(24px * var(--ratio));
        padding-left: 16px;

        .sfz {
          margin-bottom: calc(20px * var(--ratio));
        }
      }
    }

    .f7-card3 {
      padding: 0px;
      margin: 0px;
      padding: 0px calc(35px * var(--ratio)) 0px;
      padding-bottom: calc(45px * var(--ratio)) 0px;
      margin-top: calc(20px * var(--ratio));
      width: 100%;
      --f7-card-box-shadow: var(--color-fill-grey-inverse);
      /deep/.van-cell__value{
        font-size: 15px;
      }
    }

    .f7-button {
      background-color: var(--color-brand);
      color: var(--color-fill-grey-inverse);
      height: calc(96px * var(--ratio));
      line-height: calc(96px * var(--ratio));
    }
  }
}
</style>
